<script setup>
import { ref, reactive, onMounted } from 'vue';
import { roleApi } from '@/service/api.ts';;
import { buildTree } from '@/utils/utils.ts';

const { config } = defineProps({
  config: {
    type: Object,
    required: true,
  }
});
const emits = defineEmits(['change']);

onMounted(() => {
  getRoleTree();
});
const roleRt = reactive({
  list: [],
  tree: [],
});
const getRoleTree = () => {
  roleRt.list = [];
  roleRt.tree = [];
  roleApi({
    method: 'get',
    params: {}
  }).then(res => {
    roleRt.list = res?.results || [];
    let arrs = buildTree(res.results || [], 'parent');
    roleRt.tree = arrs;
  });
}

const data = ref(config.value || []);

const handleChange = () => {
  const str = roleRt.list.filter(i => data.value.includes(i.id)).map(j => j.name).join('，');
  emits('change', data.value, str);
}
</script>

<template>
  <el-tree-select
    popper-class="filter-tree"
    placeholder="选择项目角色"
    node-key="id"
    :fit-input-width="true"
    :teleported="false"
    clearable
    collapse-tags
    collapse-tags-tooltip
    :render-after-expand="false"
    multiple
    default-expand-all
    :check-strictly="true"
    show-checkbox
    :highlight-current="true"
    :props="{label: 'name'}"
    v-model="data"
    :data="roleRt.tree"
    @change="handleChange"
  />
</template>

<style lang="scss" scoped>

</style>